<template>
	<div>
		<!-- 实时数据 -->
		<div>
			<el-descriptions title="实时数据" :column="2" size="small" border>
				<el-descriptions-item label="点位名称" width="100" :span="2">研究院1</el-descriptions-item>
				<el-descriptions-item label="区域名称" :span="2">界牌镇</el-descriptions-item>
				<el-descriptions-item label="中心经度">104°35′35″E</el-descriptions-item>
				<el-descriptions-item label="中心纬度">31°30′53″N</el-descriptions-item>
				<el-descriptions-item label="发布时间" :span="2">2023-09-19 15:48:51</el-descriptions-item>
				<el-descriptions-item label="网格员姓名">古工</el-descriptions-item>
				<el-descriptions-item label="网格员电话">18923784356</el-descriptions-item>
				<el-descriptions-item label="一氧化碳">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="臭氧">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="二氧化硫">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="二氧化氮">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="PM2.5">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="PM10">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="VOC">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="温度">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="湿度">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="风速">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="风向">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="气压">1.07 mg/m³</el-descriptions-item>
				<el-descriptions-item label="主要污染物">1.07 mg/m³</el-descriptions-item>
			</el-descriptions>
		</div>
		<!-- 近24小时数据趋势 -->
		<div class="mt-4">
			<div class="flex justify-between">
				<div>近24小时数据趋势</div>
				<div>
					<el-select size="small" v-model="hourseKey" @change="handleHourseChange">
						<el-option v-for="item in options" :key="item.name" :label="item.label" :value="item.name" />
					</el-select>
				</div>
			</div>
			<div ref="chartRef" class="h-[220px] w-[460px]"></div>
		</div>
		<!-- 历史数据 -->
		<div class="mt-4">
			<div class="flex justify-between mb-4">
				<div>历史数据</div>
				<div>
					<el-radio-group v-model="hitoryRange" size="small" @change="handleRangeChange">
						<el-radio-button label="最近一小时" />
						<el-radio-button label="最近24小时" />
						<el-radio-button label="最近一个月" />
					</el-radio-group>
				</div>
			</div>
			<el-table
				size="small"
				max-height="250"
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column prop="recordTime" label="发布时间" width="140" align="center" />
				<el-table-column prop="co" label="CO" width="50" align="center" />
				<el-table-column prop="pm25" label="PM2.5" min-width="60" align="center" />
				<el-table-column prop="pm10" label="PM10" width="50" align="center" />
				<el-table-column prop="no2" label="NO₂" width="50" align="center" />
				<el-table-column prop="so2" label="SO₂" width="50" align="center" />
				<el-table-column prop="o3" label="O₃" width="50" align="center" />
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/platform/airRealTimeData';

const hitoryRange = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	pagination: {
		small: true,
		layout: 'total, sizes, prev, pager, next',
	},
});
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const hourseKey = ref('all');
const options = [
	{
		label: '全部',
		name: 'all',
	},
	{
		label: 'PM2.5',
		name: 'PM25',
	},
	{
		label: 'PM10',
		name: 'PM10',
	},
	{
		label: 'SO₂',
		name: 'SO2',
	},
	{
		label: 'NO₂',
		name: 'NO2',
	},
	{
		label: 'O₃',
		name: 'O3',
	},
	{
		label: 'CO',
		name: 'CO',
	},
	{
		label: 'VOC',
		name: 'Ext01',
	},
];

const props = defineProps({
	data: {
		type: Array,
		default: () => [],
	},
});
const chartRef = ref();
let resizeFnChain = resize;
let removeResizeFn = () => {};
let instance: any;
const datax = ref([]);
resizeFnChain = useDebounceFn(resize, 200);
const getData = () => {
	let data_co = [],
		data_pm25 = [],
		data_pm10 = [],
		data_no2 = [],
		data_so2 = [],
		data_o3 = [],
		data_voc = [];
	let series_co = {},
		series_pm25 = {},
		series_pm10 = {},
		series_no2 = {},
		series_so2 = {},
		series_o3 = {},
		series_voc = {};
	datax.value = [];
	let markPoint = {
		symbolSize: 40,
		data: [
			{ type: 'max', name: '最大值' },
			{ type: 'min', name: '最小值' },
		],
	};
	for (let i = 0; i < props.data.length; i++) {
		const item = props.data[i];
		data_co.push(item.co.toFixed(2));
		data_pm25.push(item.pm25.toFixed(0));
		data_pm10.push(item.pm10.toFixed(0));
		data_no2.push(item.no2.toFixed(0));
		data_so2.push(item.so2.toFixed(0));
		data_o3.push(item.o3.toFixed(0));
		data_voc.push(item.ext01.toFixed(0));
		datax.value.push(item.recordTime);
	}
	/*series_aqi = { name: "AQI", type: 'line', smooth: true, symbol: 'circle', symbolSize: [4, 4], lineStyle: { normal: { width: 2 } }, data: data_aqi, markPoint: markPoint };*/
	series_co = {
		name: 'CO',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_co,
		markPoint: markPoint,
	};
	series_pm25 = {
		name: 'PM2.5',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_pm25,
		markPoint: markPoint,
	};
	series_pm10 = {
		name: 'PM10',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_pm10,
		markPoint: markPoint,
	};
	series_no2 = {
		name: 'NO2',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_no2,
		markPoint: markPoint,
	};
	series_so2 = {
		name: 'SO2',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_so2,
		markPoint: markPoint,
	};
	series_o3 = {
		name: 'O3',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_o3,
		markPoint: markPoint,
	};
	series_voc = {
		name: 'VOC',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		symbolSize: [4, 4],
		lineStyle: { lineStyle: { width: 2 } },
		data: data_voc,
		markPoint: markPoint,
	};
	let seriesData = [];
	switch (hourseKey.value) {
		case 'PM25':
			seriesData.push(series_pm25);
			break;
		case 'PM10':
			seriesData.push(series_pm10);
			break;
		case 'SO2':
			seriesData.push(series_so2);
			break;
		case 'NO2':
			seriesData.push(series_no2);
			break;
		case 'O3':
			seriesData.push(series_o3);
			break;
		case 'CO':
			seriesData.push(series_co);
			break;
		case 'Ext01':
			seriesData.push(series_voc);
			break;
		default:
			seriesData.push(series_co);
			seriesData.push(series_pm25);
			seriesData.push(series_pm10);
			seriesData.push(series_no2);
			seriesData.push(series_so2);
			seriesData.push(series_o3);
			seriesData.push(series_voc);
			break;
	}
	return seriesData;
};
const setOptions = (enale = false) => {
	enale && (instance = echarts.init(chartRef.value));
	const seriesData = getData();
	const option = {
		grid: { left: '20', bottom: '10', right: '10', top: '10', containLabel: true },
		tooltip: { trigger: 'axis', formatter: undefined },
		legend: { data: [/*"AQI",*/ 'CO', 'PM2.5', 'PM10', 'NO2', 'SO2', 'O3'], top: '20', show: false },
		xAxis: {
			show: true,
			type: 'category',
			axisLabel: { show: true, color: '#9b9c9c' },
			axisLine: { show: true },
			data: datax.value,
			axisTick: { show: true },
		},
		yAxis: {
			show: true,
			type: 'value',
			axisLabel: { show: true, color: '#9b9c9c' },
			axisLine: { show: true },
			axisTick: { show: true },
			splitLine: { show: false },
			min: function (value) {
				return (value.min * 0.8).toFixed(0);
			},
			max: function (value) {
				return (value.max * 1.2).toFixed(0);
			},
		},
		series: seriesData,
	};
	instance.setOption(option);
	if (enale) {
		const { removeEvent } = useEventListener({
			el: window,
			name: 'resize',
			listener: resizeFnChain,
		});
		removeResizeFn = removeEvent;
	}
};
function resize() {
	const config = {
		animation: {
			duration: 200,
			easing: 'quadraticIn',
		},
	};
	instance.resize(config);
}

const handleHourseChange = () => {
	instance.clear();
	setOptions();
};
const handleRangeChange = () => {
	getDataList();
};
onMounted(() => {
	getDataList();
	setTimeout(() => {
		setOptions(true);
	}, 500);
});

tryOnUnmounted(() => {
	removeResizeFn();
});
</script>

<style lang="scss" scoped></style>
